<template>
    <div id="app">
        <el-container class="container">
            <el-header class="header">
							<h3>嘉江-慢捷不连锁酒店</h3>
							 <div class="avatar">
								 <a href="#">当前用户:<el-avatar style="vertical-align: middle;" :size="50">徐嘉江</el-avatar></a>
							 </div>
						</el-header>
            <el-container>
                <el-aside width="200px" class="aside">
                    <el-menu default-active="1" class="menu">
                        <el-menu-item @click="menuItemClick('/')">
                            <i class="el-icon-s-home"></i>
                            首页
                        </el-menu-item>
                        <el-menu-item @click="menuItemClick('/room/info')">
                            <i class="el-icon-s-grid"></i>
                            房间信息预览
                        </el-menu-item>
                        <el-menu-item @click="menuItemClick('/roomplan')">
                            <i class="el-icon-date"></i>
                            房型价格调整
                        </el-menu-item>
                        <el-menu-item @click="menuItemClick('/roomtype')">
                            <i class="el-icon-collection"></i>
                            房型管理
                        </el-menu-item>
                        <el-menu-item @click="menuItemClick('/room')">
                            <i class="el-icon-school"></i>
                            房间管理
                        </el-menu-item>
                        <el-menu-item @click="menuItemClick('/employee')">
                            <i class="el-icon-user"></i>
                            员工管理
                        </el-menu-item>

                        <el-menu-item @click="menuItemClick('/orderbill')">
                            <i class="el-icon-tickets"></i>
                            订单信息
                        </el-menu-item>
                        <el-menu-item @click="menuItemClick('/checkinfo')">
                            <i class="el-icon-files"></i>
                            入住登记记录
                        </el-menu-item>
												<el-menu-item @click="menuItemClick('/chart')">
												    <i class="el-icon-s-data"></i>
												    图形报表分析
												</el-menu-item>
                    </el-menu>

                </el-aside>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "App",
        methods: {
            menuItemClick(path) {
                this.$router.replace(path);
            }
        }
    }
</script>

<style scoped>
    @import url(./assets/css/base.css);


    #app {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .container {
        height: 100%;
    }

    .menu {
        color: #000000;
    }

    .header {
        background-color: #409eff;
				line-height: 55px;
    }
		
		.header h3 {
			float: left;
			vertical-align: middle;
			font-size: 32px;
			line-height: 60px;
			font-weight: 700;
			color: #FFFFFF;
		}
		
		
		.header .avatar {
			margin-right: 50px;
			float: right;
			line-height: 60px;
			
		}
		.avatar a {
			color: #FFFFFF;
			vertical-align: middle;
			text-decoration: none;
		}

</style>